import defaultImg from '@/assets/images/200.png'
import Message from './xtx-message.js'
import Confirm from './confirm'
// //注册骨架屏全局组件
// import XtxSkeleton from './xtx_skeleton.vue'
// // 注册轮播图全局组件
// import XtxCarousel from './xtx_carousel.vue'
// // 注册查看更多全局组件
// import XtxMore from './xtx_more.vue'
// // 全局注册面包屑
// import XtxBreadItem from './xtx_bread_item.vue'
// import XtxBread from './xtx_bread.vue'

//自动导入批量组件
//context(目录路径， 是否加载子目录， 加载文件的匹配正则)
const importFn = require.context('/', false, /\.vue$/)


export default {
    install(app) {
        // app.component(XtxSkeleton.name, XtxSkeleton)
        // app.component(XtxCarousel.name, XtxCarousel)
        // app.component(XtxMore.name, XtxMore)
        // app.component(XtxBreadItem.name, XtxBreadItem)
        // app.component(XtxBread.name, XtxBread)
        // 定义指令
        defineDirective(app)
        //定义一个原型函数
        app.config.globalProperties.$message = Message
        app.config.globalProperties.$confirm = Confirm

        //根据keys批量注册
        //importFn.keys()获取所有文件路径
        importFn.keys().forEach(path => {
          // 导入组件
          const component = importFn(path).default
          // 注册组件
          app.component(component.name, component)
        })
    }
}



// 定义指令
// 图片懒加载
// 创建观察对象实例
// const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器，默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例

// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom

// 指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    mounted (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observer.unobserve(el)
          el.onerror = () => {
              el.src = defaultImg
          }  
          el.src = binding.value
        }
      }, {
        threshold: 0.01
      })
      observer.observe(el)
    }
  })
}